<template>
  <div class="stock" v-show="visible">
    <div class="items">
      <div
        class="item"
        @click="select(item)"
        v-for="item in list"
        :key="item.code"
      >
        {{ item.stockName }}
        <!-- <span class="code">{{item.stockCode.substr(0,6)}}</span>
        <span class="pinyin">{{item.chiSpelling}}</span> -->
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    list: {
      default: [],
      type: Array,
    },
    visible: {
      default: false,
      type: Boolean,
    },
  },
  data() {
    return {};
  },
  methods: {
    select(item) {
      this.$emit("select", item);
    },
  },
};
</script>
<style lang="scss" scoped>
.stock {
  position: absolute;
  z-index: 1000;
  width: 263px;
  height: 100px;
  background: #1c1d21;
  border: 1px solid #434448;
  overflow: scroll;
  .items {
    .item {
      cursor: pointer;
      font-size: 15px;
      color: #bcbfc4;
      text-indent: 15px;
      padding: 5px 20px;
      .pinyin {
        font-weight: bold;
      }
      & > * {
        width: 100px;
        display: inline-block;
      }
      &:first-child {
        border-top: none;
      }
      &:hover {
        background: #1d202c;
        color: white;
      }
    }
  }
}
</style>
